<template>
  <div class="time">
    <div class="time-scroll">
      <XScroll>
        <template v-for="item in points">
          <Timing :year="item.year.toString()" size="big" />
          <template v-for="i in item.children">
            <Timing
              :month="i.month.toString()"
              :year="item.year.toString()"
              :classString="cs"
            />
          </template>
        </template>
      </XScroll>
    </div>
  </div>
</template>
<script>
import Timing from "@/components/bottom-components/Timing.vue";
import XScroll from "@/components/bottom-components/X-Scroll.vue";
import MapTools from "@/utils/mapTools";

export default {
  name: "Test1TimeScroll",
  components: { Timing, XScroll },
  data() {
    return {
      list: [
        { year: 2006, month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
        { year: 2007, month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
        { year: 2008, month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
        { year: 2009, month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
        { year: 2010, month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
        { year: 2011, month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
      ],
      points: [],
      cs: { year: null, month: null },
      y: 0,
      m: 0,
      isPaused: false,
      XScrollEl: null,
    };
  },
  computed: {
    getAllData() {
      return this.$store.state.points;
    },
    getISPaused() {
      return this.$store.state.isPaused;
    },
    getXScrollEl() {
      return this.$store.state.XScrollElement;
    },
  },

  watch: {
    getAllData: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.points = newVal;
          this.getcs();
        }
      },
      deep: true,
      immediate: true,
    },
    getISPaused: {
      handler(newVal) {
        this.isPaused = newVal;
      },
      deep: true,
      immediate: true,
    },
    getXScrollEl: {
      handler(newVal) {
        if (!newVal) return;
        this.XScrollEl = newVal;
      },
      deep: true,
      immediate: true,
    },
  },

  mounted() {
    // document.addEventListener("visibilitychange", this.handleVisiable);
  },
  beforeDestroy() {
    // document.addEventListener("visibilitychange", this.handleVisiable);
  },
  methods: {
    getcs() {
      let y = 0,
        m = 0,
        index = 0;
      setInterval(() => {
        if (this.isPaused) {
          this.cs = {
            year: this.points[y].year,
            month: this.points[y].children[m].month,
          };

          let currentPoints = this.points[y].children[m].points;

          let mapTools = new MapTools(Map);
          mapTools.addPoint(currentPoints);

          m++;
          index++;

          if (index >= 7) {
            if (this.XScrollEl) {
              this.XScrollEl.scrollTop += 50;
            }
          }

          if (m == this.points[y].children.length) {
            m = 0;
            y++;

            if (this.XScrollEl) {
              this.XScrollEl.scrollTop += 50;
            }

            // 判断是否已经遍历完所有数据。
            // 如果是遍历完所有数据，则清空样式和图层
            if (y == this.points.length) {
              y = 0;
              index = 0;
              this.XScrollEl.scrollTop = 0;
              // 清空图层
              const TLPL = this.$store.state.layeres.al[1];
              let L_Source = TLPL.layer.getSource();
              L_Source.refresh();

              // 清除样式
              var elements = window.document.querySelectorAll(".circle-active");
              elements.forEach((element) => {
                element.classList.remove("circle-active");
              });

              this.isPaused = false;
              this.$store.commit("setIsPaused", this.isPaused);
            }
          }
        }
      }, 2000);
    },
    handleVisiable(e) {
      let _this = this;
      switch (e.target.visibilityState) {
        case "hidden":
          _this.isPaused = false;
        case "visible":
          _this.isPaused = true;
          break;
      }

      this.$store.commit("setIsPaused", this.isPaused);
    },
  },
};
</script>

<style lang="less" scoped>
.time {
  width: 100%;
  height: 100%;

  .time-scroll {
    display: flex;
    height: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding: 0 5px;
  }
}

::-webkit-scrollbar {
  /* 修改滚动条的宽度 */
  width: 10px;
  height: 1px;
  display: none;
}

::-webkit-scrollbar-track {
  /* 修改滚动条的轨道颜色 */
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  /* 修改滚动条滑块的颜色 */
  background-color: #007bff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  /* 修改滚动条滑块在悬停状态下的颜色 */
  background-color: #0056b3;
}
</style>
